import React, { Component } from 'react';
import './own_tabs.less'
import OwnHome from '../own_home'
import OwnCourse from '../own_course'
import OwnBlog from '../own_blog'
import OwnSeting from '../own_seting'
import OwnConcern from '../own_concern'
import OwnFans from '../own_fans'
import MyEmpty from '../../../components/myempty'
import {getMemberInfo} from '../../../utils/auth'
import membeApi from '../../../api/member'
class OwnTabs extends Component {
  state = {
    navLeftList: [
      { title: '主页', value: 'home' },
      { title: '课程', value: 'course' },
      { title: '文章', value: 'blog' },
      { title: '设置', value: 'seting' },
    ],
    navRightList: [
      { title: '我的关注', value: 'concern' },
      { title: '我的粉丝', value: 'fans' },
    ],
    activeIndex: '',
    memberBuyCourse:{},
    memberStudyCourse:{},
    memberCollectBlog:{},
    memberPublishBlog:{},
    memberFans:{},
    memberFollow:{},
  }
  componentDidMount() {
    this.setState({
      activeIndex: this.props.active
    })
    this.getMemberOtherInfo()
  }
  getMemberOtherInfo = () => {
    const memberId = getMemberInfo().id
    membeApi.getMemberOthers(memberId).then(res=>{
      if(res.success){
        this.setState({
          memberBuyCourse:res.data.data.memberBuyCourse,
          memberStudyCourse:res.data.data.memberStudyCourse,
          memberCollectBlog:res.data.data.memberCollectBlog,
          memberPublishBlog:res.data.data.memberPublishBlog,
          memberFans:res.data.data.memberFans,
          memberFollow:res.data.data.memberFollow,
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  clickNav = (activeIndex) => {
    return () => {
      this.setState({
        activeIndex
      })
    }
  }
  render() {
    const { navLeftList, navRightList, activeIndex ,memberBuyCourse,memberStudyCourse,memberCollectBlog,memberPublishBlog,memberFans,memberFollow} = this.state
    const { memberInfo } = this.props

    return (
      <div className="own-tabs">
        <nav>
          <div className="left-nav">
            {
              navLeftList.map(item => {
                return <p onClick={this.clickNav(item.value)} className={activeIndex === item.value ? 'nav-active' : ''} key={item.value}>{item.title}</p>
              })
            }
          </div>
          <div className="right-nav">
            {
              navRightList.map(item => {
                return <p onClick={this.clickNav(item.value)} className={activeIndex === item.value ? 'nav-active' : ''} key={item.value}>{item.title}</p>
              })
            }
          </div>
        </nav>
        <main>
          {
            activeIndex === 'home' ? <OwnHome memberInfo={memberInfo} memberStudyCourse={memberStudyCourse} memberPublishBlog={memberPublishBlog} />
              : activeIndex === 'course' ? <OwnCourse memberStudyCourse={memberStudyCourse} memberBuyCourse={memberBuyCourse} />
                : activeIndex === 'blog' ? <OwnBlog memberPublishBlog={memberPublishBlog} memberCollectBlog={memberCollectBlog}/>
                  : activeIndex === 'seting' ? <OwnSeting />
                    : activeIndex === 'concern' ? <OwnConcern />
                      : activeIndex === 'fans' ? <OwnFans />
                        : <MyEmpty />
          }
        </main>
      </div>
    );
  }
}

export default OwnTabs;